<template>
  <view class="tabbar-container">
    <block v-for="item in allList" :key="item.activePage">
      <view class="tabbar-item" @click="onSwitchTab(item)">
        <image :class="item.type ==1 ?'tabbar-item-icon' :'tabbar-item-centent'" mode="heightFix"
          :src="currentSelect === item.activePage ? item.selectedIconPath : item.iconPath"></image>
        <view :class="currentSelect === item.activePage ? 'tabbar-item-text':'tabbar-text'">{{ item.text }}
        </view>
      </view>
    </block>
  </view>

</template>

<script setup>
  import {
    ref,
    reactive,
    defineProps,
    defineEmits
  } from 'vue'
  const {
    currentSelect
  } = defineProps(['currentSelect'])
  let allList = reactive(
    [{
        "selectedIconPath": "/static/tabbar/activeHome.png",
        "iconPath": "/static/tabbar/home.png",
        "pagePath": "/pages/index/index",
        "text": "首页",
        "activePage": "home",
        "type": "1"
      },
      {
        "selectedIconPath": "/static/tabbar/Add.png",
        "iconPath": "/static/tabbar/Add.png",
        "type": "2"
      },
      {
        "selectedIconPath": "/static/tabbar/activeUser.png",
        "iconPath": "/static/tabbar/user.png",
        "pagePath": "/pages/userPage/index",
        "text": "我的",
        "activePage": "user",
        "type": "1"
      }
    ]
  )
  const emit = defineEmits(['showBottom'])
  function onSwitchTab(item) {
    if (item.type == 1) {
      const url = item.pagePath
      uni.switchTab({
        url: url
      })
    } else {
      emit('showBottom',true)
    }
  }
</script>

<style lang="less" scoped>
  .tabbar-container {
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-evenly;
    padding: 12rpx 0 18rpx;
    width: 100%;
    box-shadow: 0px -4rpx 30rpx 0px rgba(0, 0, 0, 0.1);
    background: #fff;
    z-index: 999;

    .tabbar-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100rpx;

      .tabbar-item-icon {
        width: 48rpx;
        height: 48rpx;
      }

      .tabbar-item-centent {
        width: 80rpx;
        height: 80rpx;
      }

      .tabbar-item-text {
        font-size: 20rpx;
        color: rgba(255, 65, 108, 1);
      }

      .tabbar-text {
        font-size: 20rpx;
        color: rgba(153, 153, 153, 1);
      }
    }
  }
</style>